import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';

import Home from 'page/home/index.jsx';
import ProductRouter from 'page/product/router.jsx';
import Login from 'page/login/index.jsx';
import UserList from 'page/user/index.jsx';
import ErrorPage from 'page/error/index.jsx';
import Layout from 'component/layout/index.jsx';


class App extends React.Component {    
constructor(props) {
    super(props); 
}
componentWillMount() {
    console.log('componentWillMount')
    console.log(this.props)
    console.log(this.props.history)
    console.log('componentWillMount')
}
render() {
    let LayoutRouter = (
        <Layout>
            <Switch>
                <Route exact path='/' component={Home}></Route>
                <Route path='/product' component={ProductRouter}></Route>
                <Route path='/product-category' component={ProductRouter}></Route>
                <Route path='/user/index' component={UserList}></Route>
                <Redirect exact from='/user' to='/user/index'></Redirect>
                <Route component={ErrorPage} />
            </Switch>
        </Layout>
    );
    return (
        <Router>
            <Switch>
                <Route path='/login' component={Login}></Route>
                <Route path='/' render={(props) => LayoutRouter}></Route>
            </Switch>
        </Router>
    );
}
}

ReactDOM.render(
    <App title='I am title' data='Iam data' />,
    document.getElementById('app')
)